<template>
  <div class="detail">
    <div class="header">
      <div class="iconfont hico" @click="$router.back()">&#xe603;</div>
      <div class="title">{{ goodinfo.goodsname }}</div>
      <!-- 小U商城 -->
      <!-- <div class="hr"></div> -->
    </div>

    <ul class="ul1">
      <li>商品</li>
      <li>评价</li>
      <li>详情</li>
      <li>推荐</li>
    </ul>
    <div class="images">
      <img :src="$imgUrl + goodinfo.img" alt="" />
    </div>
    <div class="info">
      <ul class="ul2">
        <li class="li1">
          <span style="font-size: 0.28rem">&yen;</span
          ><span style="font-size: 0.6rem">{{ goodinfo.price }}</span>
          <span style="font-size: 0.28rem" class="span3"
            >&yen;{{ goodinfo.market_price }}</span
          >
        </li>
        <li style="font-size: 0.32rem; color: #333">
          {{ goodinfo.goodsname }}
        </li>
        <li
          style="font-size: 0.32rem; color: #666"
          v-html="goodinfo.description"
        ></li>
      </ul>
      <van-stepper v-model="value" style="text-align: right" />
    </div>
    <div class="footer">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          @click="toshopcar"
        />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="addshopcar"
        />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
    <v-nav></v-nav>
  </div>
</template>

<script>
import vNav from "../components/vNav";
import { Toast } from "vant";
import { getGoodsOne, addshopcars } from "./util/axios";
export default {
  data() {
    return {
      goodinfo: [],
      value: 1,
    };
  },
  methods: {
    addshopcar() {
      if (sessionStorage.getItem("userInfo")) {
        let obj = {
          uid: JSON.parse(sessionStorage.getItem("userInfo")).uid,
          goodsid: this.goodinfo.id,
          num: this.value,
        };
        addshopcars(obj).then((res) => {
          if (res.code == 200) {
            Toast.success(res.msg);
          }
        });
      }else{
        Toast.success('请登录');
        this.$router.push("/login")
      }
    },
    toshopcar(){
      if(sessionStorage.getItem("userInfo")){
           this.$router.push('/shopcar')
      }else{
        Toast.success("请登录");
        this.$router.push("/login")
      }
     
    }
  },
  mounted() {
    getGoodsOne({ id: this.$route.params.id }).then((res) => {
      if (res.code == 200) {
        let list = res.list ? res.list : [];
        this.goodinfo = list[0];
      }
    });
  },
  components: {
    vNav,
  },
};
</script>

<style scoped>
.detail {
  width: 7.5rem;
  background-color: #ccc;
  position: relative;
}
.footer >>> .van-goods-action {
  position: fixed;
  bottom: 0.79rem;
}
.header {
  width: 7.5rem;
  height: 0.88rem;
  line-height: 0.88rem;
  background-color: #ff6040;
  display: flex;
  color: #fff;
  align-items: center;
  position: relative;
  /* text-align: center; */
  /* padding: 0 0.1rem; */
}
.hico {
  font-size: 0.45rem;
  /* margin-left: 0.2rem; */
  /* flex: 1; */
  /* text-align: left; */
  position: absolute;
  left: 0.2rem;
}
.header .title {
  /* color: */
  font-size: 0.34rem;
  flex: 1;
  /* margin: 0 auto; */
  text-align: center;
}
.header .hr {
  /* display: inline-block; */
  width: 1.74rem;
  /* flex: 1; */
  position: absolute;
  right: 0.12rem;
  height: 0.64rem;
  border: 0.005rem solid rgba(255, 255, 255, 0.25);
  border-radius: 0.32rem;
  /* margin-right: 0.1rem; */
  /* flex: 1; */
}

.ul1 {
  display: flex;
  width: 7.5rem;
  height: 0.64rem;
  background-image: linear-gradient(to bottom, #ff6040, #ff8a80);
}
.ul1 li {
  flex: 1;
  text-align: center;
  line-height: 0.64rem;
  color: #fff;
  font-size: 0.32rem;
}
.images {
  width: 7.5rem;
  height: 7.5rem;
}
.images > img {
  display: flex;
  width: 7.5rem;
  height: 7.5rem;
}
.info {
  width: 7.5rem;
  height: 2.9rem;
  background-color: #fff;
}
.info .ul2 {
  padding: 0 0.2rem;
}
.info .li1 {
  color: #ff6040;
}
.span3 {
  color: #333;
  text-decoration: line-through;
}
</style>